<template>
  <div id="buyBackDetail">
    <div class="homeTitle">债券回购交易详情</div>
    <div class="tableBox">
      <div class="table">
        <!-- -------------------------------------------------------- -->
        <div class="tableTitle">申请人信息</div>
        <table>
          <tr>
            <td>机构编号</td> <td>{{user.no}}</td>
            <td>机构名称</td> <td>{{user.bank}}</td>
          </tr>
          <tr>
            <td>操作员工号</td> <td>{{user.jobNum}}</td>
            <td>操作员姓名</td> <td>{{user.name}}</td>
          </tr>
        </table>
        <!-- ------------------------------------------------- -->
        <div class="tableTitle">交易对手：</div>
        <table>
          <tr>
            <td>交易对手</td> <td>{{counterparty.full}}</td>
            <td>交易机构类型</td> <td>{{counterparty.type}}</td>
          </tr>
          <tr>
            <td>业务类型</td> <td>{{account.type}}</td>
            <td>开户行</td> <td>{{account.openBank}}</td>
          </tr>
          <tr>
            <td>账户名称</td> <td>{{account.accountName}}</td>
            <td>账号</td> <td>{{account.number}}</td>
          </tr>
          <tr>
            <td>支付系统行号</td> <td>{{account.payment}}</td>
            <td>托管机构</td> <td>{{account.trusteeship}}</td>
          </tr>
          <tr>
            <td>托管账户名称</td> <td>{{account.trusteeshipAccountName}}</td>
            <td>托管账号</td> <td>{{account.managedAccount}}</td>
          </tr>
        </table>
        <!-- ----------------------------------------------- -->
        <div class="tableTitle">交易信息：</div>
        <table>
          <tr>
            <td>申请编号</td> <td>{{hold.applyNum}}</td>
            <td>申请日期</td> <td>{{hold.createTime | dateformat}}</td>
          </tr>
          <tr>
            <td>交易类型</td> <td>{{hold.type}}</td>
            <td>交易方向</td> <td>{{hold.direction}}</td>
          </tr>
          <tr>
            <td>券面总额（万元）</td> <td>{{hold.direction}}</td>
            <td>币种</td> <td>{{hold.currency}}</td>
          </tr>
          <tr>
            <td>清算速度</td> <td>{{hold.clearSpeed}}</td>
            <td>交易日期</td> <td>{{hold.transactionDate | dateformat}}</td>
          </tr>
          <tr>
            <td>回购期限(天)</td> <td>{{hold.repoTerm}}</td>
            <td>回购利率（%）</td> <td>{{hold.repoRate}}</td>
          </tr>
          <tr>
            <td>计息基础</td> <td>{{hold.basicRate}}</td>
            <td>交易品种</td> <td>{{hold.tradingVarieties}}</td>
          </tr>
          <tr>
            <td>成交编号</td> <td>{{hold.transactionNumber}}</td>
            <td>交易金额（元）</td> <td>{{hold.transactionAmount}}</td>
          </tr>
          <tr>
            <td>首次结算日</td> <td>{{hold.firstSettlement | dateformat}}</td>
            <td>到期结算日</td> <td>{{hold.endSettlement | dateformat}}</td>
          </tr>
          <tr>
            <td>实际占款天数（天）</td> <td>{{hold.paymentDays}}</td>
            <td>首次结算方式</td> <td>{{hold.firstSettlementMethod}}</td>
          </tr>
          <tr>
            <td>到期结算方式</td> <td>{{hold.amountSettlementAmount}}</td>
            <td></td> <td></td>
          </tr>
          <tr v-if="hold.type == '质押式' && (hold.direction == '正回购' || hold.direction == '逆回购')">
            <td>应计利息（元）</td> <td>{{hold.accruedInterest}}</td>
            <td>到期结算金额（元）</td> <td>{{hold.settlementDue}}</td>
          </tr>
          <tr v-if="hold.type == '买断式' && hold.direction == '正回购' || hold.direction == '逆回购'">
            <td>首次净价（元/百元面额）</td> <td>{{hold.firstNetPrice}}</td>
            <td>到期净价（元/百元面额）</td> <td>{{hold.netMaturityPrice}}</td>
          </tr>
          <tr v-if="hold.type == '买断式' && hold.direction == '正回购'">
            <td>首次收益率（%）</td> <td>{{hold.firstRate}}</td>
            <td>到期收益率（%）</td> <td>{{hold.endRate}}</td>
          </tr>
          <tr v-if="hold.type == '买断式' && hold.direction == '正回购'">
            <td>首次应计利息（元/百元面额）</td> <td>{{hold.firstAccruedInterest}}</td>
            <td>到期应计利息（元/百元面额）</td> <td>{{hold.accruedMaturity}}</td>
          </tr>
          <tr v-if="hold.type == '买断式' && hold.direction == '正回购'">
            <td>首次全价（元/百元面额）</td> <td>{{hold.firstFullPrice}}</td>
            <td>到期全价（元/百元面额）</td> <td>{{hold.fullPriceDue}}</td>
          </tr>
          <tr v-if="hold.type == '买断式' && hold.direction == '正回购'">
            <td>首次结算金额（元）</td> <td>{{hold.settlementAmount}}</td>
            <td>到期结算金额（元）</td> <td>{{hold.settlementDue}}</td>
          </tr>
        </table>
 <!-- -------------------------------------------------------- -->
        <!-- <div class="tableTitle" v-if="hold.type == '质押式' && hold.direction == '正回购'">质押品列表：</div>
        <table class="stable" v-if="hold.type == '质押式' && hold.direction == '正回购'"> -->
        <div class="tableTitle" v-if="hold.direction == '正回购'">质押品列表：</div>
        <table class="stable" v-if="hold.direction == '正回购'">
          <tr>
            <td>债券代码</td> <td>债券全称</td>
            <td>债券简称</td> <td>债券品种</td>
            <td>质押券面总额(万元)</td> <td>折算比例(%)</td>
            <td>结算金额(元)</td>
          </tr>
          <tr v-if="pledgeList">
            <td>{{pledgeList.code}}</td> <td>{{pledgeList.fullName}}</td>
            <td>{{pledgeList.simpleName}}</td> <td>{{pledgeList.variety}}</td>
            <td>{{pledgeList.sumMoney}}</td> <td>{{pledgeList.ratio}}</td>
            <td>{{pledgeList.settlementAmount}}</td> 
          </tr>
          <tr v-else>
            <td colspan="7">暂无数据</td>
          </tr>
        </table>
  <!-- --------------------------------------       -->
        <div class="tableTitle" v-if="hold.type == '买断式' && (hold.direction == '正回购' || hold.direction == '逆回购')">债券信息：</div>
        <table class="tableTitle" v-if="hold.type == '买断式' && (hold.direction == '正回购' || hold.direction == '逆回购')">
          <tr>
            <td>债券代码</td> <td>{{data.bond.code}}</td>
            <td>债券全称</td> <td>{{data.bond.name}}</td>
          </tr>
          <tr>
            <td>债券简称</td> <td>{{data.bond.simple}}</td>
            <td>债券性质</td> <td>{{data.bond.nature}}</td>
          </tr>
          <tr>
            <td>债券记账品种</td> <td>{{data.bond.bookVariety}}</td>
            <td>债券币种</td> <td>{{data.bond.currency}}</td>
          </tr>
          <tr>
            <td>债券面额(元)</td> <td>{{data.bond.denomination}}</td>
            <td>发行价格(元/百元面值)</td> <td>{{data.bond.price}}</td>
          </tr>
          <tr>
            <td>计划发行总额(万元)</td> <td>{{data.bond.planSum}}</td>
            <td>实际发行总额(万元)</td> <td>{{data.bond.actualSum}}</td>
          </tr>
          <tr>
            <td>还本方式</td> <td>{{data.bond.repaymentMethod}}</td>
            <td>还本类型</td> <td>{{data.bond.repaymentType}}</td>
          </tr>
          <tr>
            <td>起息日起</td> <td>{{data.bond.fromDate | dateformat}}</td>
            <td>债券期限</td> <td>{{data.bond.maturity}}</td>
          </tr>
          <tr>
            <td>兑付日期</td> <td>{{data.bond.paymentDate | dateformat}}</td>
            <td>计息基础</td> <td>{{data.bond.bassisDay}}</td>
          </tr>
          <tr>
            <td>计息方式</td> <td>{{data.bond.bearingMethod}}</td>
            <td>利率类型</td> <td>{{data.bond.rateType}}</td>
          </tr>
          <tr>
            <td>票面利率(%)</td> <td>{{data.bond.couponRate}}</td>
            <td>剩余年限(天)</td> <td>{{data.term}}</td>
          </tr>
          <!-- <tr>
            <td>久期</td> <td></td>
            <td>凸性</td> <td></td>
          </tr> -->
          <tr>
            <td>行权方式</td> <td><el-button type="text" size="small" @click="gohangquan">查看</el-button></td>
            <td></td> <td></td>
          </tr>
        </table>
      <!-- -------------------------   -->
        <!-- <div class="tableTitle"  v-if="hold.type == '买断式'">买断式质押明细：</div>
        <table class="stable" v-if="hold.type == '买断式'">
          <tr>
            <td>交易编号</td> <td>券面总额(万元)</td>
            <td>结算金额(元)</td>
          </tr>
          <tr v-for="(item, index) in outPledgeList" :key="index">
            <td>{{item.transactionNumber}}</td> <td>{{item.totalFace}}</td>
            <td>{{item.settlementAmount}}</td>
          </tr>
        </table> -->
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'buyBackDetail',
  data () {
    return {
      user: '',
      account: '',
      counterparty: '',
      hold: '',
      pledgeList: '',
      data: '',
      outPledgeList: ''
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    gohangquan() {
      if (this.data.bondPower.length == 0) {
         this.$message({message: '暂无数据',type: 'warning'});
         return false;
      }
      this.$router.push({path: 'assetsDetailHangquan', query: {data: this.data.bondPower}});
    },
    getdata () {
      this.axios.get('bondRepurchaseHold/selectOne',{params: {id: this.$route.query.id}})
        .then(({data})=> {
          this.data = data.data;
          this.user = data.data.user;
          this.account = data.data.account;
          this.counterparty = data.data.counterparty;
          this.hold = data.data.hold;
          this.pledgeList = data.data.pledgeList;
          this.outPledgeList = data.data.outPledgeList;
        })
    },
    close () {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
  #buyBackDetail {
    .tableBox {
      padding-top: 10;
      color: white;
      .tableTitle {
        line-height: 36px;
        padding-left: 20px;
      }
      table {
        border: 1px solid white;
        width: 100%;
        text-align: center;
        border-collapse:collapse;
        margin-bottom: 20px;
        tr {
          td {
            padding: 5px 10px;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            &:nth-child(odd) {
              background:#2F3638;
            }
            &:nth-child(even) {
              background: #646E6E;
            }
          }
        }
      }
      .btn {
        text-align: center;
      }
      
    }
     table {
     margin-top: 20px;
      width: 100%;
      td {
        padding: 5px 10px;
        text-align: center;
        &:nth-child(odd) {
          background-color: #181C1D;
          color: white;
        }
        &:nth-child(even) {
          background: #535853;
        }
        >span {
          color: red;
        }
      }
    }
    .stable {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
        tr {
          &:first-child {
            background-color: #181C1D !important;;
            color: white;
            td {
              background-color: #181C1D !important;
            }
          }
          td {
            text-align: center;
            padding: 5px 10px;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            color: white;
            background: #2C3135;
          }
      }
    }
  }
</style>
